<template>
  <div class="mask" id="dialog-vm4" v-show="showDialog">
    <div class="dialog">
      <div class="dialog-header">
        <div
          class="title pos-left"
        >{{take}} - {{dialogTitle}}</div>
        <ul class="tools pos-right">
          <li class="item">
            <button class="btn" type="button" @click="closeDialog">
              <i class="icon icon-close"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="dialog-body scroll">
        <div class="row">
          <div class="col col-left">
            <div class="chart" id="chart-dlg-classify"></div>
            <div class="chart" id="chart-dlg-staff"></div>
          </div>
          <div class="col col-right">
            <ul class="panel">
              <!-- <li class="item">
                <select class="selector" v-model="disasterType">
                  <option value selected>所有类型</option>
                  <option v-for="(item,idx) in disasterTypeArray" :key="idx" :value="item">{{item}}</option>
                </select>
              </li> -->
              <!-- <li class="item">
                <input
                  type="date"
                  class="datepicker"
                  v-model="startTime"
                  :max="timeLimit"
                  :min="timeMin"
                />
              </li>
              <li class="item">至</li>
              <li class="item">
                <input
                  type="date"
                  class="datepicker"
                  v-model="endTime"
                  :max="timeLimit"
                  :min="timeMin"
                />
              </li> -->
              <li class="item">
                <input type="text" class="textbox" v-model="keyword" placeholder="请以警情位置作为关键字搜索" />
              </li>
              <li class="item">
                <button class="btn bg-blue" type="button" @click="query()">
                  <span class="text">查询</span>
                </button>
              </li>
            </ul>
            <table class="dtable">
              <thead>
                <tr>
                  <td>序号</td>
                  <td>警情位置</td>
                  <td>警情类型</td>
                  <td>出动时间</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,idx) in list" :key="idx">
                  <td style="width:5%;">{{idx + 1}}</td>
                  <td style="width:30%;">
                    <div :title="item.zhdd">{{item.zhdd}}</div>
                  </td>
                  <td style="width:15%;">
                    <div :title="item.ZQLX">{{item.zqlxName}}</div>
                  </td>
                  <td style="width:20%;">
                    <div :title="item.JJSJ">{{item.BjsjTime}}</div>
                  </td>
                </tr>
              </tbody>
            </table>
            <x-pager
              :page="page"
              :page-size="pageSize"
              :total="total"
              :max-page="maxPage"
              @pagehandler="pageHandler"
            ></x-pager>
          </div>
        </div>

        <x-loading :show="showLoading"></x-loading>
      </div>
    </div>
  </div>
</template>
<script>
import Pager from "@/components/Pager";
import Loading from "@/components/Loading";
import axios from "axios";

export default {
  data() {
    return {
      showDialog: false,
      dialogTitle: "接处警记录清单",
      disasterType: "",
      disasterTypeArray: ["火灾扑救", "抢险救援", "社会救助", "其他出动 "],
      startTime: this.dateShift(0) + " 00:00:00",
      endTime: this.dateShift(0) + " 23:59:59",
      timeLimit: this.dateShift(0) + " 00:00:00",
      timeMin: this.dateShift(-365) + " 23:59:59",
      keyword: null,
      list: [],
      listHasData: false,
      commander: 0,
      firemen: 0,
      fullmen: 0,
      page: 0,
      pageSize: 10,
      total: 10,
      maxPage: 9,
      teamName: null,
      showLoading: false,
      option: null
    };
  },
  components: {
    "x-pager": Pager,
    "x-loading": Loading
  },
  props: {
    take: String,
    show: Boolean
  },
  methods: {
    pageHandler(page) {
      this.page = page;
      let params = {
        QXWZ: this.teamName,
        ZQLX: this.disasterType,
        ZQWZ: this.keyword,
        pageSize: this.pageSize,
        pageindex: this.page,
        startTime: this.startTime,
        endTime: this.endTime,
        HTTEST: "test"
      };
      let $this = this;
      this.showLoading = true;
      axios
        .get(this.URLHEAD + "YZT_JCJSDFX_Details", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.list = data.Data.list;
          this.commander = data.Data.person[0].commander;
          this.firemen = data.Data.person[0].firemen;
          this.fullmen = data.Data.person[0].fullmen;
          this.total = data.count;
          this.dialogShow = true;
          this.showLoading = false;
        });
    },
    query(val) {
      this.teamName = val ? val : this.teamName;
      if (val == undefined) {
        this.startTime = this.startTime;
        this.endTime = this.endTime;
      } else {
        this.startTime = this.$parent.startTime;
        this.endTime = this.$parent.endTime;
      }
      this.showDialog = true;
      this.list = [];
      this.pageHandler(1);
      this.renderChartClassify();
      this.renderChartStaff();
    },
    renderChartClassify() {
      this.showLoading = true;
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        QXWZ: this.teamName
      };
      axios
        .get(this.URLHEAD + "IIndustryClassification", {
          params: params
        })
        .then(res => {
          let json = res.data;
          this.option = {
            tooltip: {
              show: true,
              trigger: "item",
              formatter: "{b}:{c}"
            },
            legend: {
              orient: "vertical",
              left: "left",
              textStyle: { fontSize: 12, color: "#fff" },
              data: json.Data.map(o => {
                return o.name;
              })
            },
            color: this.COLORS,
            series: [
              {
                name: "依分类接警数",
                type: "pie",
                radius: "55%",
                roseType: "area",
                center: ["50%", "60%"],
                data: json.Data.map(o => {
                  return { name: o.name, value: o.count };
                }),
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 12,
                    formatter: "{b}\n{c}:({d}%)",
                    position: "outside"
                  }
                }
              }
            ]
          };
          this.$Crender("chart-dlg-classify", this.option);
          this.showLoading = false;
        });
    },
    renderChartStaff() {
      this.showLoading = true;
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        QXWZ: this.teamName
      };
      axios
        .get(this.URLHEAD + "IPeopleCounting", {
          params: params
        })
        .then(res => {
          let json = res.data;
          this.option = {
            tooltip: {
              show: true,
              trigger: "item",
              formatter: "{b}:{c}"
            },
            legend: {
              orient: "vertical",
              left: "left",
              textStyle: { fontSize: 12, color: "#fff" },
              data: ["指挥员", "消防员", "专职消防员"]
            },
            color: [this.COLORS[4],this.COLORS[6],this.COLORS[7]],
            series: [
              {
                name: "队站人员",
                type: "pie",
                radius: "55%",
                roseType: "area",
                center: ["50%", "60%"],
                data: [
                  {
                    name: "指挥员",
                    value: json.Data[0].value1[0]
                  },
                  {
                    name: "消防员",
                    value: json.Data[0].value2[0]
                  },
                  {
                    name: "专职消防员",
                    value: json.Data[0].value3[0]
                  }
                ],
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 12,
                    formatter: "{b}\n{c}:({d}%)",
                    position: "outside"
                  }
                }
              }
            ]
          };
          this.$Crender("chart-dlg-staff", this.option);
          this.showLoading = false;
        });
    },
    reset() {
      this.keyword = "";
      this.disasterType = "";
      this.page = 0;
      this.pageSize = 10;
      this.total = 10;
      this.startTime = this.oneMonthAgo();
      this.endTime = this.today();
    },
    closeDialog() {
      this.showDialog = false;
      this.reset();
    }
  }
};
</script>
<style scoped>
.row {
  display: flex;
  flex-flow: row nowrap;
}
.col.col-left {
  width: 550px;
  flex-grow: 0;
}
.col.col-right {
  flex-grow: 1;
}
.col .chart {
  width: 550px;
  height: 250px;
}
</style>
